<template>
  <div>
    <h2>角色管理</h2>
    <ElButton @click="handleRole(OperationType.ADD)">角色添加</ElButton>
    <ElTable :data="roles" style="width: 100%">
      <ElTableColumn prop="id" label="角色ID" width="180"></ElTableColumn>
      <ElTableColumn prop="name" label="角色名" width="180"></ElTableColumn>
      <ElTableColumn prop="description" label="描述"></ElTableColumn>
      <ElTableColumn
        prop="is_default"
        label="默认角色"
        :formatter="formatter"
      ></ElTableColumn>
      <ElTableColumn label="操作" fixed="right">
        <template #default="scope">
          <ElButton @click="handleRole(OperationType.UPDATE, scope.row)">
            编辑
          </ElButton>
          <ElButton @click="handleRole(OperationType.DELETE, scope.row)">
            删除
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      :current-page="pageNumber"
      :page-size="pageSize"
      :page-sizes="[1, 5, 10, 20]"
      layout="prev, pager, next, sizes, total"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></ElPagination>
    <RightPanel :title="panelTitle" v-model="panelStatus">
      <EditorRole
        :type="editorType"
        :data="roleData"
        @submit="panelStatus = false"
      ></EditorRole>
    </RightPanel>
  </div>
</template>

<script lang="ts" setup>
import { IRole } from "@/api/role";
import { TRoleWithPage, useRoleStore } from "@/stores/role";
import { OperationType } from "@/utils/const";

const roleStore = useRoleStore();
const { proxy } = getCurrentInstance()!;
const { roles, count } = toRefs(roleStore.store);

const pageNumber = ref(1);
const pageSize = ref(10);
const roleData = ref({
  pageNum: pageNumber.value,
  pageSize: pageSize.value
});
watchEffect(() => {
  roleStore.getRoles({
    pageNum: pageNumber.value,
    pageSize: pageSize.value
  });
  roleData.value = {
    ...roleData.value,
    pageNum: pageNumber.value,
    pageSize: pageSize.value
  };
});

const formatter = (row: IRole) => {
  return row.is_default ? "是" : "否";
};

const handleCurrentChange = (val: number) => {
  pageNumber.value = val;
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};

const handleRole = async (type: OperationType, data?: IRole | null) => {
  //
  console.log(type, data);
  if (type == OperationType.ADD) {
    // 执行新增逻辑
    panelStatus.value = true;
    panelTitle.value = "增加角色";
    editorType.value = type;
  } else if (type == OperationType.UPDATE) {
    editorType.value = type;
    // 执行更新逻辑
    // roleData.value = data as any;
    roleData.value = {
      ...roleData.value,
      ...data
    };
    panelStatus.value = true;
    panelTitle.value = "修改角色";
  } else if (type == OperationType.DELETE) {
    // 执行删除逻辑
    roleData.value = {
      ...roleData.value,
      ...data
    };
    handleRemove();
  }
};

const handleRemove = async () => {
  try {
    await proxy?.$confirm(
      "你确定要删除" + (roleData.value as TRoleWithPage).name + "角色吗?",
      {
        type: "warning"
      }
    );
    await roleStore.removeRole(roleData.value as TRoleWithPage);
    proxy?.$message.success("角色删除成功");
  } catch (error) {
    console.log(error);
    proxy?.$message.info("取消删除");
  }
};

const editorType = ref(OperationType.ADD);
const panelTitle = ref("增加角色");

const panelStatus = ref(false);
</script>
